<template>
	<view class="order-detail">
		<!--主表信息 -->
		<view class="order-main" id="masterBox">
			<!-- <view class="title">销售合同详情</view> -->
			<vol-form class="main-form" :load-key="true" ref="form" :form-options="editFormOptions" :formFields.sync="editFormFields"></vol-form>
		</view>
		<!-- 明细列表信息 -->
		<view class="order-detail-list">
		<!-- 	<vol-table
				:height="height"
				@scrolltolower="scrolltolower"
				@rowClick="rowClick"
				:tableData="detailData"
				direction="horizontal"
				:columns.sync="detailColumns"
				ref="table"
			>
				<u-loadmore :status="loadmoreStatus" />
			</vol-table> -->
			<vol-table-shuiping
				:height="height"
				@scrolltolower="scrolltolower"
				@rowClick="rowClick"
				:tableData="detailData"
				direction="horizontal"
				:columns.sync="detailColumns"
				ref="table"
				:index='true'
			>
				<u-loadmore :status="loadmoreStatus" />
			</vol-table-shuiping>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		titel: {
			type: String,
			required: true,
			default: '数据名字'
		},
		pageUrl: {
			type: String,
			required: true,
			default: ''
		},
		detailColumns: {
			//明细表配置
			type: Array,
			required: true
		},
		editFormFields: {
			//主表配置
			type: Object,
			required: true
		},
		editFormOptions: {
			type: Array,
			required: true,
			default: () => {
				return [
					// {
					// 	title: '订单编码',
					// 	field: 'Voucher_sub',
					// 	readonly: true
					// },
					// {
					// 	title: 'ID',
					// 	required: true,
					// 	field: 'Sales_contract',
					// 	hidden: true,
					// 	readonly: true
					// },
					// {
					// 	title: '客户',
					// 	field: 'Client',
					// 	readonly: true,
					// 	data: [],
					// 	key: '客户'
					// },
					// {
					// 	title: '签订数量',
					// 	field: 'Signed_num',
					// 	type: 'number',
					// 	readonly: true
					// },
					// {
					// 	title: '签订金额',
					// 	field: 'Signed_price',
					// 	readonly: true
					// },
					// {
					// 	title: '销售税率',
					// 	field: 'Tax_rate',
					// 	data: [],
					// 	type: 'select',
					// 	key: '税率',
					// 	readonly: true
					// }
				];
			}
		}
	},
	data() {
		return {
			height: 550,
			screenHeight: 0, //屏幕高度
			detailParams: {
				page: 1,
				rows: 30,
				value: ''
			},
			loadmoreStatus: '',
			getDetailOff: true, //明细表请求开关
			currentRow: {},
			salesinfo: null, //编辑时传过来的订单id
			IDname:"",
			//主表配置
			// editFormFields: {
			// 	Voucher_sub: '',
			// 	Goods_num: '',
			// 	Total_price: '',
			// },
			// editFormOptions: [
			// 	{
			// 		title: '订单编码',
			// 		field: 'Voucher_sub',
			// 		readonly: true
			// 	},
			// 	{
			// 		title: 'ID',
			// 		required: true,
			// 		field: 'Sales_contract',
			// 		hidden: true,
			// 		readonly: true
			// 	},
			// 	{
			// 		title: '客户',
			// 		field: 'Client',
			// 		readonly: true,
			// 		data: [],
			// 		key: '客户'
			// 	},
			// 	{
			// 		title: '签订数量',
			// 		field: 'Signed_num',
			// 		type: 'number',
			// 		readonly: true
			// 	},
			// 	{
			// 		title: '签订金额',
			// 		field: 'Signed_price',
			// 		readonly: true
			// 	},
			// 	{
			// 		title: '销售税率',
			// 		field: 'Tax_rate',
			// 		data: [],
			// 		type: 'select',
			// 		key: '税率',
			// 		readonly: true
			// 	}
			// ],
			//明细表配置，具体见表单vol-form菜单
			detailData: [] //数据
			// columns: [
			// 	{
			// 		field: 'Sales_contractList',
			// 		title: '销售合同明细ID',
			// 		hidden: true
			// 	},
			// 	{
			// 		field: 'Goods_name',
			// 		title: '商品名称',
			// 		type: 'string'
			// 	},
			// 	{
			// 		field: 'Goods_num',
			// 		title: '数量',
			// 		type: 'int',
			// 		require: true
			// 	},
			// 	{
			// 		field: 'Goods_price',
			// 		title: '单价',
			// 		type: 'string',
			// 		require: true
			// 	},
			// 	{
			// 		field: 'Total_price',
			// 		title: '总价',
			// 		type: 'string',
			// 		readonly: true
			// 	}
			// ]
		};
	},
	methods: {
		scrolltolower() {
			// console.log('scrolltolower');
			this.getSalesContractListData();
		},
		rowClick(index, row) {
			//点击新建或者编辑弹出明细表的操作
			// this.isAdd = false;
		},
		getSalesContractData() {
			//获取主表数据(现在用的是框架的方法，可以自己写接口返回数据)
			// console.log('主表查询1',);
			this.editFormOptions.forEach(item=>{
				if(item.title=="ID"){
					this.IDname=item.field
				}
			})
			let params = {
				page: 1,
				row: 1
			};
			//生成查询参数
			// params.wheres = JSON.stringify([
			// 	{
			// 		name: 'Sales_contract',
			// 		value: this.salesinfo
			// 	}
			// ]);
			params.wheres = JSON.stringify([
				{
					name: this.IDname,
					value: this.salesinfo
				}
			]);
			this.http.post(`api/${this.pageUrl}/getPageData`, params, true).then((result) => {
				// Object.assign(this.editFormFields, result.rows[0]);
				this.$emit('masterDate', result.rows[0]);
			});
		},
		getSalesContractListData() {
			if (!this.getDetailOff) return;
			//获取明细表数据(现在用的是框架的方法，可以自己写接口返回数据)
			//此页面没做分页，可以用uview的list来处理分页
			this.loadmoreStatus = 'loading';
			this.detailParams.value = this.salesinfo;
			//生成查询参数
			this.http.post(`api/${this.pageUrl}/getDetailPage`, this.detailParams, true).then((result) => {
				// console.log('明细表', result);
				if (result.rows.length == 30) {
					this.getDetailOff = true;
					this.loadmoreStatus = 'loadmore';
				} else {
					this.getDetailOff = false;
					this.loadmoreStatus = 'nomore';
				}
				// console.log("this.pageUrl",this.pageUrl);
				if(this.pageUrl=="q_produce_return"){
					result.rows.forEach(item=>{
						// console.log(item);
						if(item.Type){
							item.Type="增加"
						}else{
							item.Type="退回"
						}
					})
				}
				this.detailParams.page += 1;
				this.detailData.push(...result.rows);
			});
		}
	},
	onShow() {
		//获取主表主键值
		let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		try{
			// console.log(12);
			let params = routes[routes.length - 1].options; //获取路由参数
		}catch(e){
			//TODO handle the exception
			console.log(e);
		}
		// if (params && params.salesinfo) {
		// 	this.salesinfo = params.salesinfo;
		if (this.$store.state.pageIDStore) {
			this.salesinfo = this.$store.state.pageIDStore;
			//获取主表数据
			this.getSalesContractData();
			//获取明细表数据
			this.detailParams.page = 1;
			this.detailParams.rows = 30;
			this.getSalesContractListData();
		} else {
			this.salesinfo = null;
		}
		// uni.setNavigationBarTitle({
		// 	title: this.salesinfo ? '订单编辑' : '新建订单'
		// });
	},
	created() {
		const _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.screenHeight = res.screenHeight;
			}
		});
		//获取主表主键值
		// let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		// let params = routes[routes.length - 1].options; //获取路由参数
		// if (params && params.salesinfo) {
		if ( this.$store.state.pageIDStore) {
			// this.salesinfo = params.salesinfo;
			this.salesinfo = this.$store.state.pageIDStore;
			this.state = this.$store.state;
			//获取主表数据
			// console.log(123,this.salesinfo);
			// console.log(1234,this.state);
			// console.log("params",params);
			this.getSalesContractData();
			//获取明细表数据
			this.detailParams.page = 1;
			this.detailParams.rows = 30;
			this.getSalesContractListData();
		} else {
			this.salesinfo = null;
		}
	},
	updated() {
		// const masterBox = document.getElementById('masterBox');
		// if (masterBox) {
		// 	const masterBoxHieght = masterBox.offsetHeight;
		// 	this.height = this.screenHeight - masterBoxHieght - 44;
		// }
	}
};
</script>

<style scoped lang="less">
.order-detail {
	margin-top: -20rpx;
	background: #fbfbfb;
	padding-top: 20rpx;
	overflow-y: scroll;
	overflow-x: hidden;
}

.order-main,
.order-detail-list {
	// margin: 20rpx;
	border-radius: 10rpx;
}

.main-form,
.detail-form {
	border: 1px solid #ebebeb;
	border-bottom: 0;
	border-radius: 4px;
	display: inline-block;
	width: 100%;
}

.title {
	text-align: left;
	margin: 0 0 7px 0;
	font-size: 15px;
	// border-left: 8px solid #00aaff;
	line-height: 16px;
	padding-left: 5px;
	padding-top: 9px;
	display: flex;
	position: relative;

	.detail-icon {
		position: absolute;
		width: 60rpx;
		right: 0;
		height: 44rpx;
	}
}

.detail-form {
	margin-bottom: 30rpx;
}

.detail-btns {
	margin: 15rpx 8rpx;
	display: flex;

	.detail-btn {
		margin-left: 30rpx;
	}
}
</style>
